/** 上下图文格式 */

import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {BindItem} from '../mobx/home';
import {ObserverText} from './ObserverText';
import {contextStatus, dight} from '../utils';
import {Img} from './Img';
import {
  dpmain,
  dpw10,
  dpw12,
  dpw122,
  dpw132,
  dpw14,
  dpw150,
  dpw16,
  dpw160,
  dpw180,
  dpw20,
  dpw24,
  dpw4,
  dpw8,
  dpw92,
  dpw96,
} from '../constants';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../mobx';

interface ImgTextProps extends BindItem {
  isHor?: boolean; // 是否是横图
  isJoin?: boolean; // 图片地址是否手动拼接
}

export const ImgText4 = observer(
  (props: ImgTextProps & {idx: number; navigation: any}) => {
    const {
      Author,
      ChapterCount,
      CoverUrl,
      ExtensionUrl,
      ReadCount,
      Status,
      Title,
      Description,
      Type,
      isHor,
      isJoin = true,
      BID,
      navigation,
    } = props;
    const {userInfo} = useUserInfoStore();

    // 详情页
    const toDetail = () => {
      if (navigation) {
        if (!userInfo?.Token) {
          navigation.navigate('Login');
        } else {
          navigation.navigate('cartoon-detail', {bId: BID});
        }
      }
    };

    return (
      <TouchableOpacity style={styles.box} onPress={toDetail}>
        <Img
          url={isHor ? ExtensionUrl : CoverUrl}
          style={isHor ? styles.imgh : styles.imgv}
          isJoin={isJoin}
        />
        <View style={styles.info}>
          {Title && (
            <ObserverText
              tKey={Title}
              type="card-title"
              numberOfLines={1}
              ellipsizeMode="tail"
            />
          )}
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            {Author && (
              <ObserverText
                tKey="author"
                tOptions={{author: Author}}
                type="desc"
              />
            )}
            {Status && (
              <ObserverText
                style={{marginLeft: dpw10}}
                {...contextStatus({Status, Type})}
                type="desc"
              />
            )}
          </View>
          {Status && (
            <ObserverText
              style={{marginTop: dpw12}}
              tKey={Description}
              type="desc"
              numberOfLines={2}
              ellipsizeMode="tail"
            />
          )}
          {!isHor && ReadCount && (
            <ObserverText
              style={{marginTop: dpw12}}
              tKey="hotNum"
              tOptions={{number: dight(ReadCount)}}
              type="desc"
            />
          )}
        </View>
      </TouchableOpacity>
    );
  },
);

const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    width: dpmain,
    marginBottom: dpw20,
    marginHorizontal: 'auto',
  },
  imgh: {
    width: dpw160,
    height: dpw92,
    objectFit: 'cover',
    borderRadius: dpw8,
    margin: 0,
  },
  imgv: {
    width: dpw96,
    height: dpw132,
    objectFit: 'cover',
    borderRadius: dpw8,
    margin: 0,
  },
  info: {
    marginLeft: dpw10,
    flex: 1,
  },
});
